<template>
  <div>
    <div style="margin-top:50px"></div> <!-- 手动站位 -->
    <van-tabbar
      v-model="active"
      @change="onChange"
      :active-color="tabbar.active_color"
      :inactive-color="tabbar.inactive_color"
      route
      safe-area-inset-bottom
    >
      <van-tabbar-item
        v-for="item in tabbar.list"
        :key="item.id"
        :icon="item.icon"
        :to="item.router"
      >
      {{ item.text }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import { Notify } from 'vant';

export default {
  data() {
    return {
      active: 1,
      tabbar: {
        active_color: '#242424', // 选中时的颜色
        inactive_color: '#808080', // 未选中时的颜色
        list: [
          {
            icon: 'wap-home',
            text: '首页',
            router: '/m/index', // router
          },
          {
            icon: 'diamond',
            text: '时尚圈',
            router: '/m/push', // router
          },
          {
            icon: 'manager',
            text: '我的',
            router: '/m/me', // router
          },
        ],
      },
    };
  },
  methods: {
    // 底部点击事件
    onChange(index) {
      // this.icon_replace(index);
      console.log(index);
    },
  },
  mounted() {

  },
};
</script>
